<template>
  <view class="main">
    <view class="title">本次订单已完成</view>
    <view class="sub-title">请对本次服务进行评价</view>

    <view class="item stars">
      <view class="label">总评价</view>
      <starts size="large" v-model="form.com_score" />
    </view>

    <view class="item">
      <view class="title">评价</view>
      <textarea class="textarea" v-model="form.comment" placeholder="请填写对该次服务的评价"></textarea>
    </view>

    <view class="item">
      <view class="title">请上传图片</view>

      <view class="cu-form-group" style="border-top: 0; margin-top: 5px;padding:0">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,i) in form.images" :key="i" @tap="handleViewImage(item)">
            <image :src="host+item" mode="aspectFill"></image>
            <view class="cu-tag bg-red" @click.stop="handleDeleteClick(i)">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="ChooseImage" v-if="form.images.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
        </view>
      </view>

    </view>


    <view class="btn" @click="handleSubmit">提 交</view>

    <my-dialog content="提交成功" ref="dialog"/>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import MyDialog from "@/components/dialog";
import Api from "@/utils/Api";

export default {
  name: "index",
  components: {MyDialog, Starts},
  data() {
    return {
      form: {
        com_score: 0,
        staff_score: 0,
        comment: "",
        images: [],
      },
      host: '',
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.form.order_id = options.id
  },
  methods: {
    handleSubmit() {

      if (!this.form.com_score) {
      this.$toast("请打分")
    } else if (!this.form.comment) {
      this.$toast("请输入内容")
    } else {
			
      Api.commentOrder(this.form).then(res => {
        this.$refs.dialog.show().then(_=>{
          this.core.prePageHandleMethod("refresh")
          uni.navigateBack();
        });
      })
    }
    },
    handleViewImage(url) {
      let list = this.form.images.map(i => this.host + i);
      uni.previewImage({
        urls: list,
        current: this.host + url
      });
    },
    ChooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0]);
        }
      });
    },
    uploadImage(file) {
      Api.uploadImage(file).then(res => {
        this.form.images.push(...res.map(i => i.src));
        this.host = res[0].host;
      })
    },
    handleDeleteClick(i) {
      this.form.images.splice(i, 1)
    },
  },
  watch: {
    "form.com_score"(newValue) {
      this.form.staff_score = newValue
    }
  },
}
</script>

<style scoped lang='scss'>
.main {
  min-height: 100vh;
  padding: r(60px);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;

  & > .title {
    margin-top: r(40px);
    font-size: r(38px);
    color: #333333;
  }

  & > .sub-title {
    margin: r(40px 0 20px 0);
    font-size: r(32px);
    color: rgba(#333333, 0.5);
  }

  .item {
    margin-top: r(60px);
    width: 100%;

    &.stars {
      display: flex;
      justify-content: space-between;
    }

    .name {
      font-size: r(30px);
      color: #333333;
    }

    .title {
      font-size: r(34px);
      color: #333333;
    }

    .textarea {
      margin-top: r(28px);
      background: #F5F6F7;
      border-radius: r(10px);
      padding: r(24px);
      font-size: r(26px);
    }

  }

  .btn {
    border-radius: r(50px);
    font-size: r(36px);
    color: white;
    margin-top: r(50px);
    height: r(88px);
    line-height: r(88px);
    width: 100%;
    text-align: center;
    background-color: $primary-color;
  }
}
</style>